<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>N6_1F储位管理</title>
<%@include file="/WEB-INF/common/css.jsp"%>
<style>
	.xtcardshow{
		width: 80%;
		height: 40px;
		color: #fff;
		text-align: center;
		line-height: 40px;
		border-radius: 50px;
	}
</style>
<%@include file="/WEB-INF/common/topjs.jsp"%>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">

		<%@include file="/WEB-INF/common/jsp/header.jsp"%>

		<!-- 内容主体区域 -->
		<div class="layui-container" style="padding: 15px;">
			<div class="layui-row">
				<div class="layui-col-md4" style="padding: 5px">
					<div class="layui-card">
						<div class="layui-card-header layui-bg-green">用户信息</div>
						<div class="layui-card-body">
							<p>工号: ${sessionScope.user.no }</p>
							<p>用户名: ${sessionScope.user.username }</p>
						</div>
					</div>
					<%@include file="/WEB-INF/common/jsp/message.jsp" %>
				</div>
				<div class="layui-col-md8"  style="padding: 5px">
					<div class="layui-card">
						<div class="layui-card-header layui-bg-cyan">Out 登记</div>
						<div class="layui-card-body">
							<form class="layui-form" action=""  lay-filter="form">
								<div class="layui-form-item">
									<label class="layui-form-label">SN(有限制)</label>
									<div class="layui-input-block">
										<input type="text" name="sn" required lay-verify="required"
											lay-filter="snInput" placeholder="SN" autocomplete="off"
											class="layui-input" id="sn" value="">
									</div>
								</div>
							</form>
						</div>
					</div>
					<div class="layui-card">
						<div class="layui-card-header layui-bg-cyan">手动输入 SN无限制</div>
						<div class="layui-card-body">
							<form class="layui-form" action=""  lay-filter="shoudongform">
								<div class="layui-form-item">
									<label class="layui-form-label">SN(无限制)</label>
									<div class="layui-input-block">
										<input type="text" name="sn" required lay-verify="required"
											placeholder="SN" autocomplete="off"
											class="layui-input" value="">
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-input-block">
										<button class="layui-btn" lay-submit lay-filter="shoudongform">刷出</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>

		<%@include file="/WEB-INF/common/jsp/footer.jsp"%>

	</div>
	<%@include file="/WEB-INF/common/bottomjs.jsp"%>
	<script>
	
	
$(function(){
	$("#sn").focus();
	$('#sn').bind('input propertychange', function() {
		var sn = $("#sn").val();
		if (sn.length == 12) {
			var reg = /^[\d]+$/;
			if(!reg.test(sn)){
				var imgSrc = ["0601.jpg", "11.gif", "14.gif", "16.gif", "21.gif", "4.gif"];
				var i = Math.floor(Math.random() * imgSrc.length);
				var conHtml = "<img src='${base}/assets/image/alertemoj/"+imgSrc[i]+"' /><br>";
				conHtml += "<h3 style='text-align: center;font-size: 23px;margin-top: 27px;color:#d00d0d;font-weight: bold'>SN格式有误</h3>";
				layer.open({
					title : "消息提示",
					content : conHtml,
				});
				return;
			}
			$.ajax({
				url : "${base}/api/dataDetails/auto/out.api",
				type : "post",
				data : {
					sn : $("#sn").val()
				},
				headers: Apicheck.getHeaders(),
				success: function(result){
					if(result.code == 1001){
						$("#sn").val("");
						$("#sn").focus();
						layer.msg(result.msg, {icon: 6}); 
					}else{
						layer.msg(result.msg, {icon: 5}); 
					}
				}
			})
		}
	})
	
	layui.form.on('submit(shoudongform)', function(data){
		$.ajax({
			url : "${base}/api/dataDetails/auto/out.api",
			type : "post",
			data : {
				sn : data.field.sn
			},
			headers: Apicheck.getHeaders(),
			success: function(result){
				if(result.code == 1001){
					layer.msg(result.msg, {icon: 6}); 
				}else{
					layer.msg(result.msg, {icon: 5}); 
				}
			}
		})
		return false;
	});
})
</script>
</body>
</html>